<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>找房无忧-02登录</title>
    <link rel="stylesheet" href="./找房无忧.css/模板.css">
    <link rel="stylesheet" href="./找房无忧.css/找房无忧-02登录.min.css">
    <script src="./找房无忧,js/找房无忧-首页.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <img src="./imgs/index/logo.jpg" class="logo">
        <img src="./imgs/index/my.jpg" class="my">
        <img src="./imgs/index/xiazai.jpg" class="xiazai">
    </header>
    <!-- 主体 -->

    <!-- 1.普通登录 -->
    <main>
        <p class="title">
            <span>首页</span> > 我的> 登录
        </p>
        <div id="one-1">
            <ul class="login">
                <li id="first">普通登录</li>
                <li id="second">验证码快捷登录</li>
            </ul>
            <ul class="input">
                <li>
                    <input type="text" placeholder="请输入手机号码">
                </li>
                <li>
                    <input type="text" placeholder="请输入密码"> 
                </li>
            </ul>
            <button>立即登录</button>
            <p class="register">
                <a href="#">立即注册</a>
                <a href="#">忘记密码</a>
            </p>
        </div>
    </main>

    <!-- 2.验证码登录 -->
    <div class="information">
        <p class="title">
            <span>首页</span> > 我的> 登录
        </p>
        <div class="two-2">
            <ul class="login">
                <li id="one">普通登录</li>
                <li id="two">验证码快捷登录</li>
            </ul>
            <ul class="input">
                <li>
                    <input type="text" placeholder="请输入手机号码">
                    <button class="btn1">发送验证码</button>
                </li>
                <li>
                    <input type="text" placeholder="请输入密码"> 
                </li>
            </ul>
            <button class="btn2">验证并登录</button>
            <p class="register">
                <a href="#">立即注册</a>
                <a href="#">忘记密码</a>
            </p>

        </div>
    </div>
    <!-- 底部 -->
    <footer>
        <div class="footer-top">
            北京找房无忧 > 首页
        </div>
        <div class="footer-center">
            <div class="left">
                <img src="./imgs/index/apple.png">
                <p>
                    iPhone <br> 客户端
                </p>
            </div>
            <div class="right">
                <img src="./imgs/index/android.png">
                <p>
                    Android <br> 客户端
                </p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>北京找房无忧房地产经纪公司</p>
            <p>网络经营许可证京ICP备20160812号</p>
        </div>
    </footer>
    <script>
        var one = document.querySelector('#one');
        var two = document.querySelector('#two');
        var first = document.querySelector('#first');
        var second = document.querySelector('#second');
        var three = document.querySelector('main');
        var four = document.querySelector('.two-2');
        one.onclick = function(){
            console.log('hahaha');
            three.style.display = 'block';
            four.style.display = 'none';
        }
        two.onclick = function(){
            console.log('hahaha');
            three.style.display = 'none';
            four.style.display = 'block';
        }
        first.onclick = function(){
            console.log('hahaha');
            three.style.display = 'block';
            four.style.display = 'none';
        }
        second.onclick = function(){
            console.log('hahaha');
            three.style.display = 'none';
            four.style.display = 'block';
        }
    </script>
</body>

</html>